<template>
  <footer class="footer">
    <span class="todo-count">
      剩余
      <strong>{{ surplus }}</strong>
    </span>
    <ul class="filters">
      <!-- 课后思考：能否自己定义一个数组，配合 v-for 简化代码 -->
      <li>
        <a
          :class="status === 'all' ? 'selected' : ''"
          href="javascript:;"
          @click="changeStatus('all')"
        >
          全部
        </a>
      </li>
      <li>
        <a
          :class="status === 'active' ? 'selected' : ''"
          href="javascript:;"
          @click="changeStatus('active')"
          >未完成</a
        >
      </li>
      <li>
        <a
          :class="status === 'completed' ? 'selected' : ''"
          href="javascript:;"
          @click="changeStatus('completed')"
          >已完成</a
        >
      </li>
    </ul>
    <button class="clear-completed" @click="clearDone">清除已完成</button>
  </footer>
</template>

<script setup lang="ts">
import { Status, Todo } from "@/types";
import { defineEmits, defineProps, computed } from "@vue/runtime-core";

const props = defineProps<{ status: Status; Todos: Todo[] }>();

const surplus = computed(() => {
  return props.Todos.filter((item) => !item.done).length;
});

const emit = defineEmits<{
  (event: "changeStatus", type: Status): void;
  (event: "clearDone"): void;
}>();

const changeStatus = (type: Status) => {
  emit("changeStatus", type);
};

const clearDone = () => emit("clearDone");
</script>